<template>
  <el-row class="tac">
    <el-col :span="24">
      <h5 class="sidebar-title">导航菜单</h5>
      <el-menu
          v-if="!loading"
          :default-active="activeIndex"
          class="custom-menu"
          background-color="#f0f9eb"
          text-color="#5d6d74"
          active-text-color="#67c23a"
      >
        <!-- 动态渲染菜单 -->
        <template v-for="item in menuData" :key="item.id">
          <!-- 有子菜单的情况 -->
          <el-sub-menu v-if="item.children" :index="item.id.toString()">
            <template #title>
              <el-icon><component :is="item.icon" /></el-icon>
              <span>{{ item.title }}</span>
            </template>
            <!-- 渲染子菜单组 -->
            <template v-for="group in item.children" :key="group.groupName">
              <el-menu-item-group :title="group.groupName">
                <el-menu-item
                    v-for="subItem in group.items"
                    :key="subItem.id"
                    :index="subItem.id"
                >
                  {{ subItem.title }}
                </el-menu-item>
              </el-menu-item-group>
            </template>
          </el-sub-menu>

          <!-- 没有子菜单的情况 -->
          <el-menu-item
              v-else
              :index="item.id.toString()"
              :disabled="item.disabled"
          >
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-icon class="loading-icon"><loading /></el-icon>
        加载中...
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Location,
  Menu as IconMenu,
  Document,
  Setting,
  Loading
} from '@element-plus/icons-vue'

// 定义菜单数据类型
interface MenuItem {
  id: number | string
  title: string
  icon?: string
  disabled?: boolean
  children?: {
    groupName: string
    items: {
      id: string
      title: string
    }[]
  }[]
}

const menuData = ref<MenuItem[]>([])
const loading = ref(true)
const activeIndex = ref('2') // 默认激活的菜单项

// 从API获取菜单数据
const fetchMenuData = async () => {
  try {
    loading.value = true
    // 替换为您的实际API调用
    const response = await fetch('/api/menu')
    if (!response.ok) throw new Error('获取菜单失败')

    const data = await response.json()
    menuData.value = data

    // 处理图标映射
    menuData.value.forEach(item => {
      if (!item.icon) {
        // 默认图标映射
        if (item.title.includes('One')) item.icon = 'location'
        else if (item.title.includes('Two')) item.icon = 'icon-menu'
        else if (item.title.includes('Three')) item.icon = 'document'
        else if (item.title.includes('Four')) item.icon = 'setting'
      }
    })

  } catch (error) {
    ElMessage.error('加载菜单失败: ' + error.message)
    console.error(error)

    // 加载失败时显示默认菜单
    menuData.value = getDefaultMenu()
  } finally {
    loading.value = false
  }
}

// 备用默认菜单数据
const getDefaultMenu = (): MenuItem[] => [
  {
    id: 1,
    title: "Navigator One",
    icon: "location",
    children: [
      {
        groupName: "Group One",
        items: [
          { id: "1-1", title: "item one" },
          { id: "1-2", title: "item two" }
        ]
      }
    ]
  },
  // 其他默认菜单项...
]

// 组件挂载时获取数据
onMounted(() => {
  fetchMenuData()
})
</script>

<style scoped>
/* 保持之前的样式，添加加载动画 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #67c23a;
}

.loading-icon {
  font-size: 30px;
  margin-bottom: 10px;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>